import React, { useEffect, useState } from 'react';
import MusicHttp from '../../models/MusicHttp';
// 导入跳转
import { useNavigate } from 'react-router-dom'
import axios from 'axios'
const Index = () => {
    // 创建跳转实例
    const navigate = useNavigate();
    const [musics, setMusics] = useState([]);
    // 使用async获取http请求的数据
    const fecthData = async () => {
        let res = await axios.get('http://122.112.161.135:3000/top/playlist');
        setMusics(res.data.playlists)
    }
    const getMusic = async () => {
        let res = await MusicHttp.getMusic();
        console.log(res);
    }
    // 跳转到详情页附带id值
    const toggle = (id) => {
        navigate(`/detail/${id}`)
    }
    // componentDitMount
    useEffect(() => {
        console.log("组件被创建了");
        fecthData();
        getMusic();
    }, [])
    return (
        <div>
            {musics.map(item => {
                return (
                    // 给定点击事件
                    <div onClick={() => toggle(item.id)} key={item.id * Math.random()}>{item.name}</div>
                )
            })}
        </div>
    );
}

export default Index;